<template>
	<uni-nav-bar title="派单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view :style="{ opacity: curPage === 'map' ? '0' : '1'}">
		<view class="package_sale" v-if="orderAll">
			<view class="space-between">
				<view>车友</view>
				<view>{{orderAll.driver_name}}</view>
			</view>
			<view class="space-between top">
				<view>手机号</view>
				<view>{{orderAll.driver_mobile}}</view>
			</view>
			<view class="space-between top">
				<view>车牌号</view>
				<view>{{orderAll.cart_code}}</view>
			</view>
			<view class="space-between top">
				<view>配送地址 <uni-tag text="已修改" type="primary" :inverted="true" :circle="true" style="margin-left:10rpx;"
						v-if="locName"></uni-tag></view>
						<!-- @click="chooseLocation" -->
				<view  class="center"
					style="align-items: flex-start;width:60%;justify-content: flex-end;">
					{{locName?locName:orderAll.address}}
					<uni-icons type="location" size="25"></uni-icons>
				</view>
			</view>
			<view class="space-between">
				<view>预约时间</view>
				<view>{{orderAll.delivery_time}}</view>
			</view>
			<!-- <view class="space-between top">
        <view>调度时间</view>
        <view class="center" style="justify-content: flex-end;">
          <view style="font-size: 28rpx;"> {{delivery_time?'指定时间':'预约时间'}}</view>
          <view style="font-size: 24rpx;margin-left:10rpx;" @click="openTimePicker()">
            大约{{time?time:orderAll.deliverytime}}送达 ></view>
        </view>
      </view> -->
			<view class="top">
				<view>当前配送员</view>
				<view class="center lis" v-if="listAll&&listAll.staff">
					<view v-for="(item,index) in listAll.staff" :key="index" :class="staff_id===item.value?'active':''"
						@click="()=>staff_id=item.value">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="top">
				<view>备注</view>
				<textarea class="textarea" v-model="value" placeholder="备注"></textarea>
			</view>
		</view>
		<view class="add" @click="submit()">确定</view>
	</view>
	<!-- 预约时间弹框 -->
	<TimePicker ref="TimePickerRef" @jisuanScore="jisuanScores" />
	<!-- 选择地址列表 -->
	<view v-if="curPage === 'map'"><web-view :src="mapURI"></web-view></view>

</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { onLoad } from '@dcloudio/uni-app';
	import { toPublish } from '@mqtt';
	import { getTaskParams, getSubscribeLogInfo } from '@/gql/dispatch';
	import { showLoading, errorToast, successToast } from '@/utils/prompt';
	import TimePicker from '@c/reservation/TimePicker.vue';
	import { ref, Ref } from 'vue';
	import { getDriverID } from '@/stores/driverID';
	const admin_id = getDriverID();
	const value = ref(''); //备注
	const TimePickerRef = ref(null); //预约时间弹框


	const staff_id = ref() //配送员ID
	const listAll = ref() //配送员列表

	const delivery_time = ref() //时间戳
	const time = ref() //具体时间

	const orderID = ref() //预约单ID
	const orderAll = ref() //预约单信息
	//地图、位置信息
	const curPage : Ref<'form' | 'map'> = ref('form');
	const longitude = ref()
	const latitude = ref()
	const mapURI = ref('');
	const locName = ref('')

	onLoad((pearm) => {
		orderID.value = pearm.id
		details()
	})
	function details() {
		showLoading()
		const payload = {
			query: getSubscribeLogInfo,
			variables: {
				id: Number(orderID.value),
			},
		};
		toPublish(
			'ql/control/getSubscribeLogInfo',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getSubscribeLogInfo } = obj.data;
				orderAll.value = getSubscribeLogInfo
			}
		);
	}
	// 获取数据信息
	init()
	function init() {
		showLoading()
		const payload = {
			query: getTaskParams
		};
		toPublish(
			'ql/control/getTaskParams',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getTaskParams } = obj.data;
				listAll.value = getTaskParams
				staff_id.value = getTaskParams.staff[0].value
			}
		);
	}
	// 预约时间
	function jisuanScores(tim : any, date : string, day : string) {
		delivery_time.value = tim
		time.value = day ? day + '-' + date : date
	}
	// TimePicker
	function openTimePicker() {
		TimePickerRef.value.open();
	}
	// 跳转到地址列表 选择位置信息
	function chooseLocation() {
		mapURI.value = `https://apis.map.qq.com/tools/locpicker?coord=${orderAll.value.latitude},${orderAll.value.longitude}&search=1&type=1&key=URFBZ-F4TKI-SLPGX-57GMO-ZHYM6-BCFSL&referer=安蓝环保`;
		curPage.value = 'map';
		function msgListener(event : any) {
			// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
			var loc = event.data;
			if (loc && loc.module == 'locationPicker') {
				console.log(JSON.stringify(loc) + '*****')
				curPage.value = 'form';
				longitude.value = loc.latlng.lng;
				latitude.value = loc.latlng.lat;
				locName.value = loc.poiname
				//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
				window.removeEventListener('message', msgListener);
			}
		}
		window.addEventListener('message', msgListener, false);
	}
	//提交修改任务
	function submit() {
		showLoading()
		const payload = {
			admin_id,
			staff_id: staff_id.value,
			driver_name: orderAll.value.driver_name,
			driver_mobile: orderAll.value.driver_mobile,
			cart_code: orderAll.value.cart_code,
			longitude: orderAll.value.longitude,
			latitude: orderAll.value.latitude,
			delivery_address: orderAll.value.address,
			des: value.value,
			delivery_time: orderAll.value.deliverytime,
			driver_id: orderAll.value.driver_id,
			subscribe_id: Number(orderID.value),
		};
		toPublish('control/addTask',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
					navBack()
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
		align-items: flex-start;

		input {
			text-align: right;
		}
	}

	.lis {
		flex-wrap: wrap;

		view {
			min-width: 160rpx;
			text-align: center;
			padding: 13rpx 20rpx 15rpx;
			box-sizing: border-box;
			background-color: #ECF1F5;
			color: #333;
			border-radius: 5px;
			margin: 18rpx 20rpx 10rpx 0px;
		}

		.active {
			background: #3F90FF;
			color: #FFFFFF;
		}
	}

	.add {
		width: 480rpx;
		height: 100rpx;
		background: linear-gradient(-10deg, #2C96F9, #1B91FF);
		border-radius: 5px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 50rpx auto 0px;
		font-size: 32rpx;
	}

	uni-textarea {
		width: 100%;
		background: #eee;
		border-radius: 5px;
		margin-top: 20rpx;
		padding: 15rpx;
		box-sizing: border-box;
	}
</style>